RI-7437 Rework the visuals of the Slow Log page #5154
Conversation
- update the welcome screen - update the placement of the action buttons re #RI-7437
- replace the virtual table with Redis UI re #RI-7437
Code Coverage - Frontend unit tests
Test suite run success5269 tests passing in 689 suites. Report generated by 🧪jest coverage report action from 315224d |
valkirilov
requested review from
ArtemHoruzhenko,
DimoHG,
KrumTy,
dantovska,
pawelangelow and
pd-redis
as code owners
| <FlexItem> | ||
| <Row align="center" gap="s"> | ||
| <Title size="L" color="primary"> | ||
| Slow Log |
There was a problem hiding this comment.
This looks weird. You have the title in the tab, and right below it, you have it again
There was a problem hiding this comment.
It's what we have in Figma, I didn't make it up myself 🤷♂️
| Execution time:{' '} | ||
| {numberWithSpaces( | ||
| convertNumberByUnits( | ||
| slowlogLogSlowerThan, | ||
| durationUnit, | ||
| ), | ||
| )} | ||
| | ||
| {durationUnit === DurationUnits.milliSeconds | ||
| ? DurationUnits.mSeconds |
There was a problem hiding this comment.
I know you've copied this over but this is a weird way to represent a single string value
There was a problem hiding this comment.
Yes, it's the same code that we had so far. I've worked only on the visual representation of the surrounding elements.
redisinsight/ui/src/pages/slow-log/components/Actions/Actions.styles.ts
Outdated
Show resolved
Hide resolved
redisinsight/ui/src/pages/slow-log/components/Actions/Actions.styles.ts
Outdated
Show resolved
Hide resolved
redisinsight/ui/src/pages/slow-log/components/EmptySlowLog/EmptySlowLog.tsx
Show resolved
Hide resolved
redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.styles.ts
Outdated
Show resolved
Hide resolved
redisinsight/ui/src/pages/slow-log/components/SlowLogConfig/SlowLogConfig.tsx
Outdated
Show resolved
Hide resolved
| {numberWithSpaces(convertNumberByUnits(duration, durationUnit))} | ||
| </Text> | ||
| ), | ||
| header: `Duration, ${DURATION_UNITS.find(({ value }) => value === durationUnit)?.inputDisplay}`, |
There was a problem hiding this comment.
if you access this from context, you can move this whole column config out of the component and make it static
(you'd just need to create a custom header component)
There was a problem hiding this comment.
This is a valid point, but I would rather address it in a separate PR, because such refactoring is not part of the scope for the design replacement. Anyway, thanks for pointing it!
What
Update the visuals of the Slow Log page to reflect the new Redis UI components
Testing
Welcome screen
You'll see the welcome screen because no data has been collected yet.
Config panel
Config panel for a regular database
You should see a popover with input fields to configure the settings on which the analysis will be performed.
Config panel for a cluster
As a prerequisite, you should spin up a Redis Cluster and connect to it.
Download OpenVPN client (link)
Go to
/tests/e2eand start the following Docker containerdocker-compose -f rte.regression.docker-compose.yml -f rte.networks.docker-compose.yml -f vpn.docker-compose.yml upGo to Redis Insight and open the Databases page
Connect to a new database instance via the following connection string
127.0.0.1:8200Go to the Analyze tab in the main navbar
Go to the Slow Log tab
Click on the Configure button in the top right corner
You should see a popover with details that you can configure the individual cluster nodes only.
Analysis screen with slog logs data
You should see the Slow Log table filled with details for the queries that were performed under the hood
Clear logs
A modal should appear on the screen, asking you for confirmation.